import './index.scss'
import React from 'react';
import { Pagination } from 'antd';
import { getArticlesApi } from '@/apis/article'
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

const Cart = () => {

    const Navigate = useNavigate()
    // 获取文章列表
    const [articles, setArticles] = useState([])
    const [articlesCount, setArticlesCount] = useState(0)
    // 获取筛选参数
    const [params, setParams] = useState({
        page: 1,
        per_page: 4,
        status: '',
        channel_id: '',
        begin_pubdate: '',
        end_pubdate: ''
    })
    useEffect(() => {
        async function getArticles () {
        const res = await getArticlesApi(params)
        //   console.log(res);
        setArticles(res.data.results)
        setArticlesCount(res.data.total_count)
        }
        getArticles()
    },[params])
    // 获取详情
    const dji = (id) => {
        console.log(id);
        // 跳转
        Navigate(`/article?id=${id}`)
    }

   

    return (
        <div class="container">
        <div class="blog-list">
            {/* <!-- 博客列表项 --> */}
            {articles.map((item) => (
                <div key={item.id} className="blog-item" onClick={() => {dji(item.id)}}>
                <div className="blog-title">{item.title}</div>
                <div className="blog-summary">{item.summary ? item.summary : '暂无简介请点击查看'}</div>
                <div className="stats">
                    <div><span>发布于：{item.pubdate}</span></div>
                    <div><span>👍 点赞数：{item.like_count}</span></div>
                    <div><span>👀 浏览量：{item.read_count}</span></div>
                    <div><span>💬 评论数：{0}</span></div>
                </div>
                </div>
            ))}
        </div>
        <Pagination
                total={articlesCount}
                showSizeChanger
                showQuickJumper
                showTotal={() => `总 ${articlesCount} 文章`}
            />
    </div>
    )
}


export default Cart;